{% extends 'mobile/base.html' %}

{% set headline = _('Messages') %}
{% set title = headline %}

{% set styles = ('mobile-messages',) %}
{% set classes = 'outbox mailbox' %}

{% set page_align = 'left' %}

{% block after_header %}
  <ul class="mailbox-tabs slide-on-exposed">
    <li><a href="{{ url('messages.inbox') }}">{{ _('Inbox') }}</a></li>
    <li>{{ _('Sent Messages') }}</li>
  </ul>
{% endblock %}

{% block header_buttons %}
  <a href="{{ url('messages.new') }}" class="icon-sprite add-button">{{ _('New') }}</a>
  <div data-toggle-class="editing" class="icon-sprite edit-button">{{ _('Edit') }}</div>
{% endblock %}

{% block content %}
  {% if msgs %}
    <form id="bulk-form" action="{{ url('messages.outbox_bulk_action') }}" method="post">
      <ul class="messages">
        {% for message in msgs %}
          <li>
            <a href="{{ url('messages.read_outbox', message.id) }}">
              <img class="avatar" src="{{ profile_avatar(message.recipient) }}">
              <span class="details">
                <span class="meta">
                  <span class="name">
                    {% if message.recipient %}
                      {{ display_name(message.recipient) }}
                    {% else %}
                      {{ _('System') }}
                    {% endif %}
                  </span>
                  {{ datetimeformat(message.created) }}
                </span>
                <span class="summary">{{ message.content_parsed|striptags|truncate(length=160) }}</span>
              </span>
            </a>
            <div class="blocker" data-checkbox="cb-{{ message.id }}"></div>
            <input type="checkbox" name="id" id="cb-{{ message.id }}" value="{{ message.id }}">
            <div class="checkbox" data-checkbox="cb-{{ message.id }}"></div>
          </li>
        {% endfor %}
      </ul>
      {% csrf_token %}
    </form>
  {% else %}
    <p>{{ _('There are no messages here.') }}</p>
  {% endif %}
{% endblock %}

{% block after_main %}
  <div class="header-overlay slide-on-exposed">
    <div data-toggle-class="editing" class="done-button">Done</div>
    <h2>{{ _('Edit') }}</h2>
  </div>
  <div class="footer-overlay">
    <div data-submit="bulk-form" data-name="delete" class="trash-button icon-sprite"></div>
  </div>
{% endblock %}
